<html !DOCTYPE>
  <head>
  	<meta charset="utf-8" />
    <script src="assets/leap-0.6.3.min.js"></script>
    <style type="text/css">
      .position {
        width: 250px;
        height: 300px;
        position: absolute;
        background-color: blue;
        top: 200px;
        left: 50%;
        transition:  all 2s;
        transform-origin: left;
       
      }
      .p1{
      	z-index: 10;
      }
     .p2{
     	background-color: red;
     	z-index: 9;
     }
     .p3{
     	background-color: firebrick;
     	z-index: 8;
     }
     .p4{
     	background-color: cadetblue;
     	z-index: 7;
     }
     .p5{
     	background-color: azure;
     	z-index: 6;
     }
     .p6{
     	background-color: darkgray;
     	z-index: 5;
     }
    </style>
  </head>
  <body>
    <div class="position p1" ></div>
    <div class="position p2"></div>
    <div class="position p3"></div>
    <div class="position p4"></div>
    <div class="position p5"></div>
    <div class="position p6"></div>
    <div class="p" style="text-align: center;font-size: 50px;position: fixed;bottom: 200px;">
    	当前失去连接leapserve
    </div>
  </body>
 <script src="gest.js"></script>
  <script type="text/javascript">
 
var showhandnumObj = document.getElementsByClassName('p')[0]
Gest.initGest({distanceTime:1500},function(frame){
	switch(frame.hands.length){
		case 0:
		showhandnumObj.innerHTML = '当前没有检测到手';
		break;
		
		case 1:
		showhandnumObj.innerHTML = '当前检测到一只手';
		break;
		
		case 2:
		showhandnumObj.innerHTML = '当前检测到两只手';
		break;
		default:
		showhandnumObj.innerHTML = '当前失去连接leapserve';
	}
})

var tnum = 0
function moveUp(){
		console.log("上");
		if(tnum==6){
			alert('翻完了')
		  tnum=6
		}
	
		else{	tnum++
		
		document.getElementsByClassName('position')[tnum-1].style.transformOrigin = 'top'
			document.getElementsByClassName('position')[tnum-1].style.transform = 'perspective(500px) rotateX(180deg)'
		}
		
	}
	
	function moveDown(){
		console.log("下");
		if(tnum==6){
			alert('翻完了')
		  tnum=6
		}
	
		else{	tnum++
	
		document.getElementsByClassName('position')[tnum-1].style.transformOrigin = 'bottom'
			document.getElementsByClassName('position')[tnum-1].style.transform = 'perspective(500px) rotateX(-180deg)'
		}
	}
	
	function moveLeft(){
		if(tnum==6){
			alert('翻完了')
		  tnum=6
		}
	
		else{	tnum++
		console.log("左"+tnum);
			document.getElementsByClassName('position')[tnum-1].style.transform = 'perspective(500px) rotateY(-180deg)'
		}
		
	}    	
	
	function moveRight(){
		
		
		if(tnum==6){
			alert('翻完了')
		  tnum=6
		}
	
		else{	
			tnum++
		console.log("右"+tnum);
		 document.getElementsByClassName('position')[tnum-1].style.transformOrigin = 'right'
			document.getElementsByClassName('position')[tnum-1].style.transform = 'perspective(500px) rotateY(180deg)'
		}
	}		
//var controller = new Leap.Controller({
//                       enableGestures: true,
//                       frameEventName: 'animationFrame'
//                    });
//controller.on('frame',function(frame){
//	console.log(frame)
//})
//controller.connect()
  </script>
</html>
